<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康管理系统</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/friends.css">
    <link rel="stylesheet" href="/css/settings.css">
    <link rel="stylesheet" href="/css/contacts.css">
    <link rel="stylesheet" href="/css/messages.css">
    <link rel="stylesheet" href="/css/patient-management.css">
    <link rel="stylesheet" href="/css/notifications.css">
    <link rel="stylesheet" href="/css/videochat.css">
    <link rel="stylesheet" href="/css/appointment.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 侧边导航栏 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <div class="header-content">
                    <h2>健康管理平台</h2>
                    <div class="notification-area">
                        <div class="notification-icon" id="notification-toggle">
                            <i class="fas fa-bell"></i>
                            <span class="notification-badge">3</span>
                        </div>
                        <!-- Debug button, only for development -->
                        <div class="debug-btn" id="debug-load-notifications" style="font-size: 10px; cursor: pointer; margin-left: 5px; background: #f1f1f1; padding: 2px 5px; border-radius: 3px; display: none;">
                            Refresh
                        </div>
                    </div>
                </div>
            </div>
            <ul class="nav-list">
                <li class="nav-item active" data-page="home">
                    <a href="#"><i class="fas fa-home"></i>首页</a>
                </li>
                <li class="nav-item" data-page="profile">
                    <a href="#"><i class="fas fa-user-md"></i>健康档案</a>
                </li>
                <li class="nav-item" data-page="monitor">
                    <a href="#"><i class="fas fa-heartbeat"></i>健康监测</a>
                </li>
                <li class="nav-item" data-page="advice">
                    <a href="#"><i class="fas fa-notes-medical"></i>健康建议</a>
                </li>
                <li class="nav-item" data-page="news">
                    <a href="#"><i class="fas fa-newspaper"></i>健康快讯</a>
                </li>
                <li class="nav-item" data-page="appointment">
                    <a href="#"><i class="fas fa-calendar-check"></i>预约管理</a>
                </li>
                <li class="nav-item" data-page="contacts">
                    <a href="#"><i class="fas fa-address-book"></i>通讯录</a>
                </li>
                <li class="nav-item" data-page="friends">
                    <a href="#"><i class="fas fa-users"></i>朋友圈</a>
                </li>
                <li class="nav-item" data-page="messages">
                    <a href="#"><i class="fas fa-comments"></i>消息</a>
                </li>
                <li class="nav-item" data-page="settings">
                    <a href="#"><i class="fas fa-cog"></i>设置</a>
                </li>
                <li class="nav-item" data-page="logout">
                    <a href="#"><i class="fas fa-sign-out-alt"></i>退出登录</a>
                </li>
            </ul>
        </nav>

        <!-- 主内容区域 -->
        <main class="content">
            <!-- 首页内容 -->
            <div class="page-content" id="home">
                <div class="page-header">
                    <h1>健康管理系统</h1>
                    <div class="user-info">
                        <span class="user-name">欢迎，用户</span>
                        <img src="/images/avatar.jpg" alt="用户头像" class="avatar">
                    </div>
                </div>
                
                <div class="dashboard">
                    <div class="dashboard-row">
                        <div class="card">
                            <div class="card-header">
                                <h3>健康指标</h3>
                            </div>
                            <div class="card-body">
                                <div class="health-metric">
                                    <div class="metric-icon"><i class="fas fa-heartbeat"></i></div>
                                    <div class="metric-content">
                                        <span class="metric-title">心率</span>
                                        <span class="metric-value">75 <small>次/分</small></span>
                                    </div>
                                </div>
                                <div class="health-metric">
                                    <div class="metric-icon"><i class="fas fa-weight"></i></div>
                                    <div class="metric-content">
                                        <span class="metric-title">体重</span>
                                        <span class="metric-value">68 <small>kg</small></span>
                                    </div>
                                </div>
                                <div class="health-metric">
                                    <div class="metric-icon"><i class="fas fa-walking"></i></div>
                                    <div class="metric-content">
                                        <span class="metric-title">步数</span>
                                        <span class="metric-value">8,465 <small>步/天</small></span>
                                    </div>
                                </div>
                                <div class="health-metric">
                                    <div class="metric-icon"><i class="fas fa-bed"></i></div>
                                    <div class="metric-content">
                                        <span class="metric-title">睡眠</span>
                                        <span class="metric-value">7.5 <small>小时</small></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <h3>近期预约</h3>
                            </div>
                            <div class="card-body">
                                <div class="card-empty-state">
                                    <i class="fas fa-calendar-check"></i>
                                    <p>暂无预约信息</p>
                                </div>
                                <a href="#" class="btn btn-primary">创建预约</a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="dashboard-row">
                        <div class="card">
                            <div class="card-header">
                                <h3>健康建议</h3>
                            </div>
                            <div class="card-body">
                                <div class="advice-item">
                                    <div class="advice-icon"><i class="fas fa-apple-alt"></i></div>
                                    <div class="advice-content">
                                        <h4>饮食建议</h4>
                                        <p>根据您的健康状况，建议增加蔬果摄入，减少高糖食品。</p>
                                    </div>
                                </div>
                                <div class="advice-item">
                                    <div class="advice-icon"><i class="fas fa-running"></i></div>
                                    <div class="advice-content">
                                        <h4>运动建议</h4>
                                        <p>每周保持3-4次中等强度有氧运动，每次30分钟以上。</p>
                                    </div>
                                </div>
                                <a href="#" class="btn btn-primary">查看更多建议</a>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <h3>健康资讯</h3>
                            </div>
                            <div class="card-body">
                                <div class="news-item">
                                    <img src="/images/news1.jpg" alt="健康新闻" class="news-img">
                                    <div class="news-content">
                                        <h4>夏季预防中暑指南</h4>
                                        <p>随着气温升高，如何有效预防中暑成为健康关注焦点...</p>
                                        <span class="news-date">2023-06-10</span>
                                    </div>
                                </div>
                                <div class="news-item">
                                    <img src="/images/news2.jpg" alt="健康新闻" class="news-img">
                                    <div class="news-content">
                                        <h4>新研究：每天步行对心脏健康的影响</h4>
                                        <p>最新研究表明，每天步行8000步可显著降低心血管疾病风险...</p>
                                        <span class="news-date">2023-06-08</span>
                                    </div>
                                </div>
                                <a href="#" class="btn btn-primary">浏览更多资讯</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 健康档案页面 -->
            <div class="page-content" id="profile" style="display: none;">
                <div class="page-header">
                    <h1>健康档案</h1>
                    <div class="user-info">
                        <span class="user-name">欢迎，用户</span>
                        <img src="/images/avatar.png" alt="用户头像" class="avatar">
                    </div>
                </div>
                
                <div class="profile-tabs">
                    <div class="tab active" data-tab="basic-info">基本信息</div>
                    <div class="tab" data-tab="medical-history">病史记录</div>
                    <div class="tab" data-tab="examination">体检报告</div>
                    <div class="tab" data-tab="vaccination">疫苗接种</div>
                    <div class="tab" data-tab="family-history">家族病史</div>
                </div>
                
                <div class="tab-content" id="basic-info">
                    <div class="profile-form">
                        <div class="form-group">
                            <label>姓名</label>
                            <input type="text" id="name" value="张三" class="form-control">
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label>性别</label>
                                <select id="gender" class="form-control">
                                    <option value="male">男</option>
                                    <option value="female">女</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>出生日期</label>
                                <input type="date" id="birthdate" value="1990-01-01" class="form-control">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label>身高 (cm)</label>
                                <input type="number" id="height" value="175" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>体重 (kg)</label>
                                <input type="number" id="weight" value="68" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>血型</label>
                                <select id="blood-type" class="form-control">
                                    <option value="A">A型</option>
                                    <option value="B">B型</option>
                                    <option value="AB">AB型</option>
                                    <option value="O">O型</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>过敏史</label>
                            <textarea id="allergies" class="form-control" placeholder="请输入过敏史，如无请填写"无""></textarea>
                        </div>
                        <div class="form-group">
                            <label>紧急联系人</label>
                            <input type="text" id="emergency-contact" class="form-control" value="李四 (父亲) - 13800138000">
                        </div>
                        <div class="form-actions">
                            <button id="save-profile" class="btn btn-primary">保存信息</button>
                        </div>
                    </div>
                </div>
                
                <div class="tab-content" id="medical-history" style="display: none;">
                    <div class="action-bar">
                        <button id="add-medical-record" class="btn btn-primary"><i class="fas fa-plus"></i> 添加记录</button>
                    </div>
                    <div class="records-container" id="medical-records-list">
                        <!-- 病史记录将通过JavaScript动态生成 -->
                    </div>
                </div>
                
                <div class="tab-content" id="examination" style="display: none;">
                    <div class="action-bar">
                        <button id="upload-report" class="btn btn-primary"><i class="fas fa-upload"></i> 上传报告</button>
                        <div class="filter">
                            <label>筛选：</label>
                            <select id="report-year-filter">
                                <option value="all">全部年份</option>
                                <option value="2023">2023年</option>
                                <option value="2022">2022年</option>
                                <option value="2021">2021年</option>
                            </select>
                        </div>
                    </div>
                    <div class="reports-container" id="examination-reports-list">
                        <!-- 体检报告将通过JavaScript动态生成 -->
                    </div>
                </div>
                
                <div class="tab-content" id="vaccination" style="display: none;">
                    <div class="action-bar">
                        <button id="add-vaccination" class="btn btn-primary"><i class="fas fa-plus"></i> 添加记录</button>
                    </div>
                    <div class="vaccination-timeline" id="vaccination-records">
                        <!-- 疫苗接种记录将通过JavaScript动态生成 -->
                    </div>
                </div>
                
                <div class="tab-content" id="family-history" style="display: none;">
                    <div class="family-tree-container">
                        <div id="family-tree-chart">
                            <!-- 家族病史图将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    <div class="family-history-form">
                        <h3>添加家族病史</h3>
                        <div class="form-row">
                            <div class="form-group">
                                <label>关系</label>
                                <select id="relation" class="form-control">
                                    <option value="father">父亲</option>
                                    <option value="mother">母亲</option>
                                    <option value="grandfather-paternal">祖父</option>
                                    <option value="grandmother-paternal">祖母</option>
                                    <option value="grandfather-maternal">外祖父</option>
                                    <option value="grandmother-maternal">外祖母</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>疾病</label>
                                <input type="text" id="disease" class="form-control">
                            </div>
                        </div>
                        <div class="form-actions">
                            <button id="add-family-history" class="btn btn-primary">添加</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 患者管理页面 - 医生专用 -->
            <div class="page-content" id="patient-management" style="display: none;">
                <div class="page-header">
                    <h1>患者管理</h1>
                    <div class="user-info">
                        <span class="user-name">欢迎，用户</span>
                        <img src="/images/avatar.png" alt="用户头像" class="avatar">
                    </div>
                </div>
                
                <!-- Hidden inputs for server-side data -->
                <input type="hidden" id="viewPatientDetails" th:value="${viewPatientDetails != null ? viewPatientDetails : false}">
                <input type="hidden" id="selectedPatientId" th:value="${selectedPatientId != null ? selectedPatientId : ''}">
                <script th:if="${patient != null}">
                    window.patientData = /*[[${patient}]]*/ {};
                </script>
                
                <div class="patient-management-container">
                    <!-- 患者统计卡片 -->
                    <div class="card">
                        <div class="card-header">
                            <h3>患者统计</h3>
                        </div>
                        <div class="card-body">
                            <div class="stats-row">
                                <div class="stat-item">
                                    <div class="stat-value" id="total-patients-count">0</div>
                                    <div class="stat-label">全部患者</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value" id="confirmed-patients-count">0</div>
                                    <div class="stat-label">已确认</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value" id="pending-patients-count">0</div>
                                    <div class="stat-label">待确认</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 患者列表卡片 -->
                    <div class="card">
                        <div class="card-header">
                            <h3>我的患者</h3>
                            <div class="card-actions">
                                <button class="btn btn-primary btn-sm" id="add-patient-btn">
                                    <i class="fas fa-plus"></i> 添加患者
                                </button>
                                <div class="filter-dropdown">
                                    <select id="patient-filter">
                                        <option value="all">全部患者</option>
                                        <option value="confirmed">已确认</option>
                                        <option value="pending">待确认</option>
                                    </select>
                                </div>
                                <div class="search-box">
                                    <input type="text" placeholder="搜索患者..." id="patient-search">
                                    <i class="fas fa-search"></i>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="patient-list" id="patient-list">
                                <!-- 患者列表会通过JavaScript动态加载 -->
                                <div class="loading-indicator">
                                    <i class="fas fa-spinner fa-spin"></i>
                                    <span>加载患者列表...</span>
                                </div>
                            </div>
                            
                            <div class="pagination">
                                <button class="btn-page prev" id="prev-page"><i class="fas fa-chevron-left"></i></button>
                                <span class="page-info" id="page-info">第 <span id="current-page">1</span> 页，共 <span id="total-pages">1</span> 页</span>
                                <button class="btn-page next" id="next-page"><i class="fas fa-chevron-right"></i></button>
                            </div>
                            
                            <div class="batch-actions">
                                <label class="checkbox-container">
                                    <input type="checkbox" id="select-all-patients">
                                    <span class="checkmark"></span>
                                    全选
                                </label>
                                <button class="btn btn-sm btn-outline" id="batch-confirm-btn" disabled>批量确认</button>
                                <button class="btn btn-sm btn-outline-danger" id="batch-remove-btn" disabled>批量移除</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 添加患者弹窗 -->
                <div class="modal" id="add-patient-modal">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3>添加患者</h3>
                            <button id="close-add-patient-modal" class="btn-icon">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="search-tabs">
                                <div class="tab active" data-tab="phone-search">手机号搜索</div>
                                <div class="tab" data-tab="email-search">邮箱搜索</div>
                            </div>
                            
                            <div class="tab-content" id="phone-search">
                                <div class="form-group">
                                    <label>患者手机号</label>
                                    <div class="input-with-button">
                                        <input type="text" id="patient-phone" class="form-control" placeholder="请输入患者手机号">
                                        <button id="search-by-phone" class="btn btn-primary">搜索</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="tab-content" id="email-search" style="display: none;">
                                <div class="form-group">
                                    <label>患者邮箱</label>
                                    <div class="input-with-button">
                                        <input type="email" id="patient-email" class="form-control" placeholder="请输入患者邮箱">
                                        <button id="search-by-email" class="btn btn-primary">搜索</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="search-results" id="patient-search-results" style="display: none;">
                                <!-- 搜索结果将在这里显示 -->
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 确认移除患者弹窗 -->
                <div class="modal" id="remove-patient-modal">
                    <div class="modal-content modal-sm">
                        <div class="modal-header">
                            <h3>移除患者</h3>
                            <button id="close-remove-modal" class="btn-icon">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>确定要移除此患者吗？移除后将无法获取该患者的健康数据。</p>
                        </div>
                        <div class="modal-footer">
                            <button id="confirm-remove" class="btn btn-danger">确认移除</button>
                            <button id="cancel-remove" class="btn btn-secondary">取消</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 健康监测页面 -->
            <div class="page-content" id="monitor" style="display: none;">
                <div class="page-header">
                    <h1>健康监测</h1>
                    <div class="user-info">
                        <span class="user-name">欢迎，用户</span>
                        <img src="/images/avatar.png" alt="用户头像" class="avatar">
                    </div>
                </div>
                
                <div class="dashboard-row">
                    <div class="card">
                        <div class="card-header">
                            <h3>实时健康数据</h3>
                            <div class="card-actions">
                                <button id="refresh-data" class="btn-icon"><i class="fas fa-sync-alt"></i></button>
                                <button id="view-history" class="btn-icon"><i class="fas fa-history"></i></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="real-time-metrics">
                                <div class="metric-large">
                                    <div class="metric-icon"><i class="fas fa-heartbeat"></i></div>
                                    <div class="metric-content">
                                        <span class="metric-title">心率</span>
                                        <span class="metric-value" id="heart-rate-value">75 <small>次/分</small></span>
                                    </div>
                                    <div class="metric-chart" id="heart-rate-chart"></div>
                                </div>
                                <div class="metric-large">
                                    <div class="metric-icon"><i class="fas fa-lungs"></i></div>
                                    <div class="metric-content">
                                        <span class="metric-title">血氧</span>
                                        <span class="metric-value" id="blood-oxygen-value">98 <small>%</small></span>
                                    </div>
                                    <div class="metric-chart" id="blood-oxygen-chart"></div>
                                </div>
                                <div class="metric-large">
                                    <div class="metric-icon"><i class="fas fa-tachometer-alt"></i></div>
                                    <div class="metric-content">
                                        <span class="metric-title">血压</span>
                                        <span class="metric-value" id="blood-pressure-value">120/80 <small>mmHg</small></span>
                                    </div>
                                    <div class="metric-chart" id="blood-pressure-chart"></div>
                                </div>
                                <div class="metric-large">
                                    <div class="metric-icon"><i class="fas fa-walking"></i></div>
                                    <div class="metric-content">
                                        <span class="metric-title">今日步数</span>
                                        <span class="metric-value" id="steps-value">8,465 <small>步</small></span>
                                    </div>
                                    <div class="metric-chart" id="steps-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="dashboard-row">
                    <div class="card">
                        <div class="card-header">
                            <h3>健康趋势</h3>
                            <div class="period-selector">
                                <button class="period-btn active" data-period="week">周</button>
                                <button class="period-btn" data-period="month">月</button>
                                <button class="period-btn" data-period="year">年</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="trend-chart-container">
                                <div id="health-trend-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="dashboard-row">
                    <div class="card">
                        <div class="card-header">
                            <h3>手动记录</h3>
                        </div>
                        <div class="card-body">
                            <div class="manual-record-form">
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>记录类型</label>
                                        <select id="record-type" class="form-control">
                                            <option value="weight">体重</option>
                                            <option value="blood-sugar">血糖</option>
                                            <option value="temperature">体温</option>
                                            <option value="sleep">睡眠</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>数值</label>
                                        <input type="text" id="record-value" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>日期时间</label>
                                        <input type="datetime-local" id="record-datetime" class="form-control">
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button id="save-record" class="btn btn-primary">保存记录</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他页面内容会根据导航切换显示 -->
            <div class="page-content" id="advice" style="display: none;">健康建议内容</div>
            <div class="page-content" id="news" style="display: none;">健康快讯内容</div>
            <div class="page-content" id="appointment" style="display: none;">
                <div class="page-header">
                    <h1>预约管理</h1>
                    <div class="user-info">
                        <span class="user-name">欢迎，用户</span>
                        <img src="/images/avatar.png" alt="用户头像" class="avatar">
                    </div>
                </div>
                
                <!-- Appointment content will be dynamically generated by the appointment.js module -->
            </div>
            <div class="page-content" id="contacts" style="display: none;">
                <div class="page-header">
                    <h1>通讯录</h1>
                    <div class="user-info">
                        <span class="user-name">欢迎，用户</span>
                        <img src="/images/avatar.png" alt="用户头像" class="avatar">
                    </div>
                </div>
                
                <div class="contacts-container">
                    <div class="contacts-sidebar">
                        <div class="contacts-search">
                            <input type="text" id="contact-search" placeholder="搜索联系人..." class="form-control">
                            <button id="add-contact" class="btn-icon"><i class="fas fa-plus"></i></button>
                        </div>
                        
                        <div class="contacts-filter">
                            <span class="filter-item active" data-filter="all">全部</span>
                            <span class="filter-item" data-filter="online">在线</span>
                            <span class="filter-item" data-filter="family">家人</span>
                            <span class="filter-item" data-filter="friend">朋友</span>
                            <span class="filter-item" data-filter="colleague">同事</span>
                        </div>
                        
                        <div class="contacts-list" id="contacts-list">
                            <!-- 联系人列表将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    
                    <div class="contact-details" id="contact-details">
                        <!-- 联系人详情将通过JavaScript动态生成 -->
                        <div class="empty-state">
                            <i class="fas fa-user-friends"></i>
                            <p>请选择一个联系人查看详细信息</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-content" id="friends" style="display: none;">
                <div class="page-header">
                    <h1>朋友圈</h1>
                    <div class="user-info">
                        <span class="user-name">欢迎，用户</span>
                        <img src="/images/avatar.png" alt="用户头像" class="avatar">
                    </div>
                </div>
                
                <div class="social-feed-container">
                    <div class="social-feed-sidebar">
                        <div class="user-profile">
                            <div class="cover-photo">
                                <img src="/images/cover.jpg" alt="封面照片">
                            </div>
                            <div class="profile-info">
                                <img src="/images/avatar.png" alt="用户头像" class="profile-avatar">
                                <h3 class="profile-name">当前用户</h3>
                            </div>
                        </div>
                        
                        <div class="sidebar-actions">
                            <button id="create-post-btn" class="btn btn-primary btn-block">
                                <i class="fas fa-edit"></i> 发布朋友圈
                            </button>
                            <button id="my-posts-btn" class="sidebar-action-btn">
                                <i class="fas fa-file-alt"></i> 我的发布
                            </button>
                            <button id="photos-btn" class="sidebar-action-btn">
                                <i class="fas fa-images"></i> 相册
                            </button>
                            <button id="favorites-btn" class="sidebar-action-btn">
                                <i class="fas fa-star"></i> 收藏
                            </button>
                            <button id="settings-btn" class="sidebar-action-btn">
                                <i class="fas fa-cog"></i> 设置
                            </button>
                        </div>
                    </div>
                    
                    <div class="social-feed-main">
                        <div class="social-feed" id="social-feed">
                            <!-- 朋友圈内容将通过JavaScript动态生成 -->
                            <div class="loading-indicator">
                                <i class="fas fa-spinner fa-spin"></i>
                                <span>加载中...</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 评论弹窗 -->
                <div class="comment-modal" id="comment-modal">
                    <div class="comment-modal-content">
                        <div class="comment-modal-header">
                            <h4>发表评论</h4>
                            <button id="close-comment-modal" class="btn-icon">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="comment-modal-body">
                            <textarea id="comment-text" placeholder="写下你的评论..." class="form-control"></textarea>
                        </div>
                        <div class="comment-modal-footer">
                            <button id="submit-comment" class="btn btn-primary">发表</button>
                        </div>
                    </div>
                </div>
                
                <!-- 添加发布朋友圈弹窗 -->
                <div class="post-modal" id="post-modal">
                    <div class="post-modal-content">
                        <div class="post-modal-header">
                            <h4>发布朋友圈</h4>
                            <button id="close-post-modal" class="btn-icon">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="post-modal-body">
                            <textarea id="post-content" placeholder="分享你的健康生活..." class="form-control"></textarea>
                            <div class="media-preview" id="media-preview"></div>
                            <div class="composer-actions">
                                <div class="media-actions">
                                    <label for="upload-image" class="media-action-btn">
                                        <i class="fas fa-image"></i>
                                        <span>图片</span>
                                        <input type="file" id="upload-image" accept="image/*" multiple style="display: none;">
                                    </label>
                                    <label for="upload-video" class="media-action-btn">
                                        <i class="fas fa-video"></i>
                                        <span>视频</span>
                                        <input type="file" id="upload-video" accept="video/*" style="display: none;">
                                    </label>
                                    <button class="media-action-btn" id="location-btn">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <span>位置</span>
                                    </button>
                                </div>
                                <div class="post-actions">
                                    <label class="checkbox-container">
                                        <input type="checkbox" id="post-top">
                                        <span class="checkmark"></span>
                                        置顶
                                    </label>
                                    <button id="publish-post" class="btn btn-primary">发布</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-content" id="messages" style="display: none;">
                <div class="page-header">
                    <h1>消息</h1>
                </div>
                
                <div class="messages-container">
                    <!-- 消息侧边栏：联系人列表 -->
                    <div class="messages-sidebar">
                        <div class="message-tabs">
                            <div class="tab active" data-tab="recent">最近消息</div>
                            <div class="tab" data-tab="unread">未读消息</div>
                            <div class="tab" data-tab="favorite">收藏</div>
                        </div>
                        
                        <div class="contacts-list" id="message-contacts">
                            <!-- 联系人列表将通过JavaScript动态生成 -->
                            <div class="loading-spinner">
                                <i class="fas fa-spinner fa-spin"></i>
                                <span>加载联系人...</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 消息主内容区域 -->
                    <div class="messages-content">
                        <div class="empty-chat" id="empty-chat">
                            <div class="empty-chat-icon">
                                <i class="fas fa-comments"></i>
                            </div>
                            <h3>您的消息</h3>
                            <p>选择一个联系人开始聊天，或创建新的消息</p>
                            <button class="btn btn-primary" id="start-new-message">
                                <i class="fas fa-edit"></i> 新建消息
                            </button>
                        </div>
                        
                        <div class="chat-container" id="chat-container" style="display: none;">
                            <!-- 聊天头部 -->
                            <div class="chat-header">
                                <div class="chat-contact-info">
                                    <img src="/images/doctor1.jpg" alt="联系人头像" class="avatar" id="chat-contact-avatar">
                                    <div class="contact-details">
                                        <h3 id="chat-contact-name">李医生</h3>
                                        <span class="status online" id="chat-contact-status">在线</span>
                                    </div>
                                </div>
                                <div class="chat-actions">
                                    <button class="btn-icon" id="voice-call-btn" title="语音通话">
                                        <i class="fas fa-phone"></i>
                                    </button>
                                    <button class="btn-icon" id="video-call-btn" title="视频通话">
                                        <i class="fas fa-video"></i>
                                    </button>
                                    <button class="btn-icon" title="更多选项">
                                        <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 聊天消息区域 -->
                            <div class="chat-messages" id="chat-messages">
                                <!-- 消息内容将通过JavaScript动态生成 -->
                            </div>
                            
                            <!-- 聊天输入区域 -->
                            <div class="chat-input-area">
                                <div class="chat-tools">
                                    <button class="btn-icon" title="表情">
                                        <i class="far fa-smile"></i>
                                    </button>
                                    <button class="btn-icon" title="图片">
                                        <i class="far fa-image"></i>
                                    </button>
                                    <button class="btn-icon" title="文件">
                                        <i class="far fa-file"></i>
                                    </button>
                                    <button class="btn-icon" title="健康数据">
                                        <i class="fas fa-heartbeat"></i>
                                    </button>
                                </div>
                                <div class="chat-input">
                                    <textarea id="message-input" placeholder="输入消息..."></textarea>
                                    <button id="send-message-btn" class="btn-send">
                                        <i class="fas fa-paper-plane"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 新建消息弹窗 -->
                <div class="modal" id="new-message-modal">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3>新建消息</h3>
                            <button id="close-message-modal" class="btn-icon">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="search-input">
                                <i class="fas fa-search"></i>
                                <input type="text" placeholder="搜索联系人..." id="new-message-search">
                            </div>
                            <div class="contacts-section">
                                <h4>医生</h4>
                                <div class="modal-contacts-list" id="doctors-list">
                                    <!-- 医生列表将通过JavaScript动态生成 -->
                                </div>
                            </div>
                            <div class="contacts-section">
                                <h4>家人</h4>
                                <div class="modal-contacts-list" id="family-list">
                                    <!-- 家人列表将通过JavaScript动态生成 -->
                                </div>
                            </div>
                            <div class="contacts-section">
                                <h4>朋友</h4>
                                <div class="modal-contacts-list" id="friends-list">
                                    <!-- 朋友列表将通过JavaScript动态生成 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-content" id="settings" style="display: none;">
                <div class="page-header">
                    <h1>设置</h1>
                    <div class="user-info">
                        <span class="user-name">欢迎，用户</span>
                        <img src="/images/avatar.png" alt="用户头像" class="avatar">
                    </div>
                </div>
                
                <div class="settings-container">
                    <!-- 设置页面导航 -->
                    <div class="settings-nav">
                        <div class="settings-nav-item active" data-settings="profile">
                            <i class="fas fa-user"></i>
                            <span>个人资料</span>
                        </div>
                        <div class="settings-nav-item" data-settings="health">
                            <i class="fas fa-heartbeat"></i>
                            <span>健康信息</span>
                        </div>
                        <div class="settings-nav-item" data-settings="security">
                            <i class="fas fa-shield-alt"></i>
                            <span>安全设置</span>
                        </div>
                        <div class="settings-nav-item" data-settings="privacy">
                            <i class="fas fa-user-shield"></i>
                            <span>隐私设置</span>
                        </div>
                        <div class="settings-nav-item" data-settings="notifications">
                            <i class="fas fa-bell"></i>
                            <span>通知设置</span>
                        </div>
                        <div class="settings-nav-item" data-settings="doctor">
                            <i class="fas fa-user-md"></i>
                            <span>医生信息</span>
                        </div>
                    </div>
                    
                    <!-- 设置内容区域 -->
                    <div class="settings-content">
                        <div class="scroll-indicator"></div>
                        <!-- 个人资料设置 -->
                        <div class="settings-section active" id="profile-settings">
                            <h2>个人资料</h2>
                            <div class="settings-form">
                                <div class="avatar-upload">
                                    <div class="avatar-preview">
                                        <img src="/images/avatar.png" alt="头像预览">
                                    </div>
                                    <div class="avatar-actions">
                                        <label for="avatar-upload" class="btn btn-secondary">
                                            <i class="fas fa-camera"></i> 更换头像
                                        </label>
                                        <input type="file" id="avatar-upload" accept="image/*" style="display: none;">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label>用户名</label>
                                    <input type="text" class="form-control" value="健康用户001">
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>姓名</label>
                                        <input type="text" class="form-control" value="张三">
                                    </div>
                                    <div class="form-group">
                                        <label>昵称</label>
                                        <input type="text" class="form-control" value="健康达人">
                                    </div>
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>性别</label>
                                        <select class="form-control">
                                            <option value="male" selected>男</option>
                                            <option value="female">女</option>
                                            <option value="other">其他</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>出生日期</label>
                                        <input type="date" class="form-control" value="1990-01-01">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label>电子邮箱</label>
                                    <input type="email" class="form-control" value="example@health.com">
                                </div>
                                
                                <div class="form-group">
                                    <label>手机号码</label>
                                    <input type="tel" class="form-control" value="138****8888">
                                </div>
                                
                                <div class="form-group">
                                    <label>个人简介</label>
                                    <textarea class="form-control" rows="3">热爱健康生活，喜欢运动和健康饮食。</textarea>
                                </div>
                                
                                <div class="form-actions">
                                    <button class="btn btn-primary">保存更改</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 健康信息设置 -->
                        <div class="settings-section" id="health-settings">
                            <h2>健康信息</h2>
                            <div class="settings-form">
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>身高 (cm)</label>
                                        <input type="number" id="patient-height" class="form-control" value="175">
                                    </div>
                                    <div class="form-group">
                                        <label>体重 (kg)</label>
                                        <input type="number" id="patient-weight" class="form-control" value="68">
                                    </div>
                                    <div class="form-group">
                                        <label>血型</label>
                                        <select id="patient-blood-type" class="form-control">
                                            <option value="A">A型</option>
                                            <option value="B">B型</option>
                                            <option value="AB">AB型</option>
                                            <option value="O">O型</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label>过敏史</label>
                                    <textarea id="patient-allergies" class="form-control" placeholder="如有过敏情况，请在此填写"></textarea>
                                </div>
                                
                                <div class="form-group">
                                    <label>病史记录</label>
                                    <textarea id="patient-medical-history" class="form-control" placeholder="请填写您的病史记录，包括慢性疾病等"></textarea>
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>紧急联系人</label>
                                        <input type="text" id="patient-emergency-contact" class="form-control" placeholder="紧急情况下的联系人姓名">
                                    </div>
                                    <div class="form-group">
                                        <label>紧急联系人电话</label>
                                        <input type="tel" id="patient-emergency-phone" class="form-control" placeholder="紧急联系人电话">
                                    </div>
                                </div>
                                
                                <div class="form-actions">
                                    <button class="btn btn-primary">保存更改</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 安全设置 -->
                        <div class="settings-section" id="security-settings">
                            <h2>安全设置</h2>
                            <div class="settings-form">
                                <div class="setting-card">
                                    <div class="setting-card-header">
                                        <h3>修改密码</h3>
                                    </div>
                                    <div class="setting-card-body">
                                        <form class="settings-form password-form">
                                            <div class="form-group">
                                                <label>当前密码</label>
                                                <input type="password" class="form-control" id="current-password" required>
                                            </div>
                                            <div class="form-group">
                                                <label>新密码</label>
                                                <input type="password" class="form-control" id="new-password" minlength="6" required>
                                                <small class="form-text text-muted">密码长度至少为6个字符</small>
                                            </div>
                                            <div class="form-group">
                                                <label>确认新密码</label>
                                                <input type="password" class="form-control" id="confirm-password" required>
                                            </div>
                                            <div class="form-actions">
                                                <button type="button" id="change-password-btn" class="btn btn-primary">更新密码</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                
<!-- 两步验证模块已移除 -->
                                
                                <div class="setting-card">
                                    <div class="setting-card-header">
                                        <h3>登录设备</h3>
                                        <div class="card-header-actions">
                                            <button id="refresh-devices" class="btn-icon" title="刷新设备列表">
                                                <i class="fas fa-sync-alt"></i>
                                            </button>
                                            <div class="header-info">
                                                <span class="badge" id="devices-count">0</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="setting-card-body">
                                        <div class="device-stats">
                                            <div class="stat-item">
                                                <i class="fas fa-shield-alt"></i>
                                                <span class="stat-label">安全状态</span>
                                                <span class="stat-value" id="security-status">正在检查...</span>
                                            </div>
                                            <div class="stat-item">
                                                <i class="fas fa-calendar-alt"></i>
                                                <span class="stat-label">上次登录</span>
                                                <span class="stat-value" id="last-login-time">--</span>
                                            </div>
                                        </div>
                                        
                                        <div class="device-list" id="login-devices-list">
                                            <div class="loading-devices">
                                                <i class="fas fa-spinner fa-spin"></i>
                                                <span>正在加载设备信息...</span>
                                            </div>
                                            <!-- 设备列表将通过JavaScript动态加载 -->
                                        </div>

                                        <div class="device-list-empty" style="display: none;">
                                            <i class="fas fa-laptop-house"></i>
                                            <p>没有找到设备记录</p>
                                        </div>
                                        
                                        <div class="form-actions">
                                            <button id="logout-all-devices" class="btn btn-danger">
                                                <i class="fas fa-sign-out-alt"></i>
                                                注销所有其他设备
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 隐私设置 -->
                        <div class="settings-section" id="privacy-settings">
                            <h2>隐私设置</h2>
                            <div class="settings-form">
                                <div class="setting-card">
                                    <div class="setting-card-header">
                                        <h3>健康数据隐私</h3>
                                    </div>
                                    <div class="setting-card-body">
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>分享健康数据给医生</strong>
                                                <p>允许您的主治医生查看您的健康数据</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>分享健康数据给家人</strong>
                                                <p>允许您的家庭成员查看您的健康数据</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox">
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>匿名分享数据用于研究</strong>
                                                <p>允许匿名分享数据用于医学研究</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="setting-card">
                                    <div class="setting-card-header">
                                        <h3>朋友圈隐私</h3>
                                    </div>
                                    <div class="setting-card-body">
                                        <div class="form-group">
                                            <label>谁可以查看我的朋友圈</label>
                                            <select class="form-control">
                                                <option>所有人</option>
                                                <option selected>仅好友</option>
                                                <option>仅家人</option>
                                                <option>指定好友</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>谁可以评论我的朋友圈</label>
                                            <select class="form-control">
                                                <option>所有人</option>
                                                <option selected>仅好友</option>
                                                <option>仅家人</option>
                                                <option>不允许评论</option>
                                            </select>
                                        </div>
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>显示我的健康成就</strong>
                                                <p>在朋友圈中显示您的健康成就</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="setting-card">
                                    <div class="setting-card-header">
                                        <h3>个人资料隐私</h3>
                                    </div>
                                    <div class="setting-card-body">
                                        <div class="form-group">
                                            <label>谁可以查看我的个人资料</label>
                                            <select class="form-control">
                                                <option>所有人</option>
                                                <option selected>仅好友</option>
                                                <option>仅医生和家人</option>
                                                <option>仅自己</option>
                                            </select>
                                        </div>
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>显示在线状态</strong>
                                                <p>让其他人看到您的在线状态</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-actions">
                                    <button class="btn btn-primary">保存更改</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 通知设置 -->
                        <div class="settings-section" id="notifications-settings">
                            <h2>通知设置</h2>
                            <div class="settings-form">
                                <div class="setting-card">
                                    <div class="setting-card-header">
                                        <h3>应用内通知</h3>
                                    </div>
                                    <div class="setting-card-body">
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>健康提醒</strong>
                                                <p>健康监测数据异常提醒</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>预约提醒</strong>
                                                <p>医疗预约日期提醒</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>用药提醒</strong>
                                                <p>按时服药提醒</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>朋友圈通知</strong>
                                                <p>朋友圈点赞和评论通知</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>健康资讯</strong>
                                                <p>最新健康资讯推送</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox">
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="setting-card">
                                    <div class="setting-card-header">
                                        <h3>邮件通知</h3>
                                    </div>
                                    <div class="setting-card-body">
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>健康报告</strong>
                                                <p>发送每周健康报告到邮箱</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>重要提醒</strong>
                                                <p>重要健康提醒发送到邮箱</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>系统通知</strong>
                                                <p>系统更新和维护通知</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox">
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="setting-card">
                                    <div class="setting-card-header">
                                        <h3>短信通知</h3>
                                    </div>
                                    <div class="setting-card-body">
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>预约提醒</strong>
                                                <p>以短信形式发送预约提醒</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                        <div class="toggle-setting">
                                            <div class="toggle-info">
                                                <strong>健康警报</strong>
                                                <p>异常健康数据短信提醒</p>
                                            </div>
                                            <label class="switch">
                                                <input type="checkbox" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-actions">
                                    <button class="btn btn-primary">保存更改</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 医生信息 -->
                        <div class="settings-section" id="doctor-settings">
                            <h2>医生信息</h2>
                            <div class="settings-form">
                                <!-- 绑定请求部分 - 仅对患者显示 -->
                                <div class="setting-card" id="doctor-binding-requests-card" style="display: none;">
                                    <div class="setting-card-header">
                                        <h3>医生绑定请求</h3>
                                        <div class="header-info">
                                            <span class="badge pending-requests-count">0</span>
                                        </div>
                                    </div>
                                    <div class="setting-card-body">
                                        <div id="binding-requests-list" class="doctor-list">
                                            <!-- 绑定请求将通过JavaScript动态生成 -->
                                        </div>
                                        <div id="no-pending-requests" class="empty-state" style="display: none;">
                                            <i class="fas fa-check-circle"></i>
                                            <p>当前没有待处理的医生绑定请求</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 当前绑定的医生 - 仅对患者显示 -->
                                <div class="setting-card" id="current-doctor-card" style="display: none;">
                                    <div class="setting-card-header">
                                        <h3>我的主治医生</h3>
                                        <div class="card-header-actions">
                                            <button id="refresh-doctor-info" class="btn-icon" title="刷新医生信息">
                                                <i class="fas fa-sync-alt"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="setting-card-body">
                                        <div id="current-doctor" class="doctor-list professional-layout">
                                            <!-- 当前医生信息将通过JavaScript动态生成 -->
                                        </div>
                                        <div id="no-current-doctor" class="empty-state" style="text-align: center; padding: 20px;">
                                            <i class="fas fa-user-md" style="font-size: 3rem; color: #ccc; margin-bottom: 15px;"></i>
                                            <p>您当前没有绑定主治医生</p>
                                            <p class="text-muted">绑定医生后，可以享受更全面的健康管理服务</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 医生专业信息编辑 - 仅对医生角色显示 -->
                                <div class="setting-card" id="doctor-profile-card" style="display: none;">
                                    <div class="setting-card-header">
                                        <h3>专业资料</h3>
                                    </div>
                                    <div class="setting-card-body">
                                        <form id="doctor-profile-form" class="settings-form">
                                            <div class="form-group">
                                                <label>专业领域</label>
                                                <input type="text" id="doctor-specialty" class="form-control" placeholder="如：心脏科、内科、外科等">
                                            </div>
                                            <div class="form-group">
                                                <label>所属医院</label>
                                                <input type="text" id="doctor-hospital" class="form-control" placeholder="如：北京协和医院">
                                            </div>
                                            <div class="form-group">
                                                <label>职称</label>
                                                <input type="text" id="doctor-title" class="form-control" placeholder="如：主任医师、副主任医师等">
                                            </div>
                                            <div class="form-group">
                                                <label>医师执照号</label>
                                                <input type="text" id="doctor-license" class="form-control" placeholder="医师执照编号">
                                            </div>
                                            <div class="form-group">
                                                <label>专业简介</label>
                                                <textarea id="doctor-professional-bio" class="form-control" rows="4" placeholder="请介绍您的专业背景、经验和特长等"></textarea>
                                            </div>
                                            <div class="form-actions">
                                                <button type="button" id="save-doctor-profile-btn" class="btn btn-primary">保存更改</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                
                                <!-- 患者管理 - 仅对医生角色显示 -->
                                <div class="setting-card" id="patient-management-card" style="display: none;">
                                    <div class="setting-card-header">
                                        <h3>患者管理</h3>
                                        <div class="header-info">
                                            <span class="badge patient-count">0</span>
                                        </div>
                                    </div>
                                    <div class="setting-card-body">
                                        <p>您可以在"患者管理"页面查看和管理您的患者。</p>
                                        <div class="form-actions">
                                            <button type="button" id="go-to-patients-btn" class="btn btn-primary">前往患者管理</button>
                                        </div>
                                    </div>
                                </div>

                                <div class="setting-card" id="patient-doctor-permissions-card">
                                    <div class="setting-card-header">
                                        <h3>医疗团队权限</h3>
                                    </div>
                                    <div class="setting-card-body">
                                        <div class="form-group">
                                            <label>医疗团队可以访问</label>
                                            <div class="checkbox-list">
                                                <label class="checkbox-container">
                                                    <input type="checkbox" checked>
                                                    <span class="checkmark"></span>
                                                    基本健康指标（心率、血压等）
                                                </label>
                                                <label class="checkbox-container">
                                                    <input type="checkbox" checked>
                                                    <span class="checkmark"></span>
                                                    体检报告
                                                </label>
                                                <label class="checkbox-container">
                                                    <input type="checkbox" checked>
                                                    <span class="checkmark"></span>
                                                    病史记录
                                                </label>
                                                <label class="checkbox-container">
                                                    <input type="checkbox" checked>
                                                    <span class="checkmark"></span>
                                                    用药记录
                                                </label>
                                                <label class="checkbox-container">
                                                    <input type="checkbox">
                                                    <span class="checkmark"></span>
                                                    生活习惯数据（睡眠、饮食等）
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 通知遮罩层 -->
    <div class="notification-overlay" id="notification-overlay"></div>
    
    <!-- 通知面板 -->
    <div class="notification-panel" id="notification-panel">
        <div class="notification-header">
            <h3>通知中心</h3>
            <div class="notification-actions">
                <button class="btn-icon" id="refresh-notifications" title="刷新通知">
                    <i class="fas fa-sync-alt"></i>
                </button>
                <button class="btn-icon" title="标记全部已读">
                    <i class="fas fa-check-double"></i>
                </button>
                <button class="btn-icon" title="通知设置">
                    <i class="fas fa-cog"></i>
                </button>
                <button class="btn-icon close-notification" title="关闭">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        
        <div class="notification-tabs">
            <span class="tab active" data-tab="all">全部</span>
            <span class="tab" data-tab="unread">未读</span>
            <span class="tab" data-tab="important">重要</span>
        </div>
        
        <div class="notification-list">
            <!-- 通知内容将通过JavaScript动态生成 -->
        </div>
        
        <div class="notification-footer">
            <button class="btn btn-text btn-block">查看全部通知</button>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="/js/websocket-manager.js"></script>
    <script src="/js/websocket-client.js"></script>
    <script src="/js/auth.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/health-management.js"></script>
    <script src="/js/contacts.js"></script>
    <script src="/js/moments.js"></script>
    <script src="/js/settings.js"></script>
    <script src="/js/messages.js"></script>
    <script src="/js/role-manager.js"></script>
    <script src="/js/patient-management.js"></script>
    <script src="/js/notifications.js"></script>
    <script src="/js/VideoChat.js"></script>
    <script src="/js/appointment.js"></script>
    <script src="/js/appointment-calendar.js"></script>
    <script src="/js/appointment-form.js"></script>

</body>
</html> 